<template>
	<view style="display: flex;justify-content: space-between;flex-wrap: wrap; height: 100vh;">
		<scroll-view
			:enable-flex="true"
			:show-scrollbar="false"
			@scrolltolower="lower"
			:scroll-y="true"
			style=" width: 702rpx; margin: 0 auto; margin-top: 30rpx; display: flex;justify-content: space-between; flex-wrap: wrap; height: 100vh;"
		>
			<!-- 服务商品item -->
			<view class="server">
				<view class="server_con">
					<view class="server_con_box r" v-for="(item, index) in dataList" :key="index" @click="GO('fuwuxiangqing', item.id , item)">
						<image :src="item.image" mode="aspectFill" style="width: 305rpx; height: 286rpx;"></image>
						<view>
							<text style="white-space: nowrap;">{{ item.title }}</text>
							<text>￥{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 服务商品item -->
			<!-- 	<view style="width: 338rpx;margin-top: 29rpx;" v-for="(item,index) in dataList" :key="index">
				<image mode="aspectFill" :src="item.image" style="width: 338rpx;height: 212rpx;"></image>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
					<view style="font-size: 28rpx;color: #333333;">{{item.title}}</view>
					<view style="font-size: 28rpx;color: #F07203;">￥{{item.price}}</view>
				</view>
				<text style="width: 338rpx;font-size: 22rpx;color: #666666;
			display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin-top: 16rpx;">
					{{item.subtitle}}
				</text>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			width: 0,
			page: 1,
			classifyid: 0,
			dataList: [
				{
					/**
					 * id
					 * image	封面
					 * price	价格
					 * title	标题
					 * subtitle	简介
					 */
				},
			],
		};
	},
	onLoad() {
		// this.classifyid = uni.getStorageSync('carid')
		// console.log("this.classifyid: ",this.classifyid);
		this.getData();
	},
	onShow() {
		console.log('this.classifyid: ', this.classifyid);
		try {
			const result = uni.getStorageSync('carid');
			// console.log("result: ",result);
			if (result) {
				// ...接下来要做的事....
				// this.classifyid = uni.getStorageSync('carid')
				this.classifyid = result; //无用代码，但是做个return出去。避免后续使用重写
				this.getData(result); //执行代码
				// 清除数据
				uni.removeStorage({
					key: 'carid',
				});
				console.log(this.classifyid);
			}
		} catch (error) {
			//没有相关数据
		}
	},
	created() {
		// let _width = uni.getSystemInfoSync()
		let _this = this;
		uni.getSystemInfo({
			success(e) {
				_this.width = e.windowWidth;
			},
		});
		// this.width = _width.windowWidth;
	},
	methods: {
		GO(type, id, item) {
			console.log('item :>> ', item);
			this.$Router.push({
				name: type,
				params: {
					id: id,
					item:item,
					tt:0
					
				},
			});
		},
		lower() {
			console.log('页面滚动到了底部');
		},
		//初始化数据
		async getData(id) {
			let res;
			try {
				res = await this.$request.get('addons/shopro/goods/lists', {
					data: {
						category_id: 2, //1是汽车，2是服务
						page: this.page,
						// category_id:id
					},
				});
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			console.log('serviceData===', res.data.data.data);
			this.dataList = res.data.data.data;
		},
	},
};
</script>

<style lang="scss" scoped>
.server {
	overflow: hidden;
	width: 100%;
	.server_con {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.server_con_box {
			width: 340rpx;
			height: 434rpx;
			border: 1rpx dashed #ccc;
			padding: 15rpx 18rpx 40rpx;
			margin-bottom: 22rpx;
			image {
				width: 152px;
				height: 143px;
			}
			> view:nth-of-type(1) {
				display: flex;
				flex-direction: column;
				padding-top: 18rpx;
				align-items: center;
				text {
					font-family: PingFang SC;
					font-weight: 500;

					&:first-child {
						font-size: 28rpx;

						color: #333333;
					}
					&:last-child {
						font-size: 24rpx;
						color: #f07203;
						margin-top: 27rpx;
					}
				}
			}
		}
	}
}
</style>
